
new Vue({
    el: '#app',
    data: function () {
        return {
            createFormVisible: false,
            getRoomVisible: false,
            showRoomCreatedPwdIpt: false,
            formLabelWidth: '120px',
            room: {
                name: '',
                description: '',
                type: '',
                authType: '',
                pwd: '',
                holdHour: '',
            },
            roomGet: {},
            needPwd: '',
            room2: {},
            navActiveIndex: "1"
        }
    },
    computed: {
        showPwdIpt: function () {
            return this.room.authType === 'PROTECTED';
        }
    },
    methods: {
        isEmpty: function (val) {
            return val === undefined || val == null || val === ''
        },
        createRoom: function () {
            if (this.isEmpty(this.room.authType) || this.isEmpty(this.room.type) || this.isEmpty(this.room.holdHour)) {
                let msg = this.$message({
                    type: 'error',
                    message: '请确保房间信息完整（除描述外其他均为必填[选]项）'
                });
                return;
            }

            if (this.room.authType === 'PROTECTED') {
                if (this.isEmpty(this.room.pwd)) {
                    this.$message({
                        type: 'error',
                        message: '加密房间请必须输入密码'
                    });
                    return;
                }
            }
            let that = this;
            that.createFormVisible = false;
            setTimeout(function () {
                $.post({
                    url: '/api/foo/create',
                    async: false,
                    data: JSON.stringify(that.room),
                    contentType: "application/json; charset=utf-8",
                    dataType: 'json',
                    success: function (data) {
                        console.log(data);
                        alert(data.data.id);
                    }
                });
            }, 200);
        },
        openJoinDialog: function () {
            let that = this;
            this.$prompt('请输入房间编号', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^[0-9a-zA-Z]{6}$/,
                inputErrorMessage: '编号格式不正确'
            }).then(({value}) => {
                let tm = this.$message({
                    type: 'info',
                    showClose: false,
                    message: '正在核查：' + value,
                    duration: 0
                });
                setTimeout(function () {
                    $.get({
                        url: '/api/foo/check?no=' + value,
                        async: true,
                        dataType: 'json',
                        success: function (data) {
                            tm.close();
                            console.log(data);
                            let res = data.success;
                            if (res) {
                                that.getRoomVisible = true;
                                let fooObj = data.data;
                                that.roomGet = that.simpleClone(fooObj);
                                that.room2 = fooObj;
                                that.room2.type = fooObj.type === "EDU" ? "学习" : (fooObj.type === "WORK" ? "工作" : "其他");
                                that.room2.authType = fooObj.type === "PUBLIC" ? "公开" : (fooObj.type === "DEFAULT" ? "需要登录" : "加密");
                                // TODO
                                that.room2.state = fooObj.state === "CREATED" ? "等待加入" : (fooObj.type === "DEFAULT" ? "需要登录" : "加密");
                                console.log(this.room2);
                            } else {
                                that.$notify.error({
                                    title: '加入失败',
                                    message: data.message
                                });
                            }
                        }
                    });
                }, 1500);
            }).catch(() => {
                that.showMessage('info', '取消加入');
            });
        },
        beforeJoinRoom: function () {
            let that = this;
            console.log(this.roomGet);
            if (this.roomGet.authType === 'PROTECTED') {
                this.$prompt('请输入房间密码', '提示', {
                    confirmButtonText: '请求加入',
                    cancelButtonText: '取消',
                    inputPattern: /\S/,
                    inputErrorMessage: '编号格式不正确'
                }).then(({value}) => {
                    this.checkJoin(this.roomGet.id, value);
                }).catch(() => {
                    that.showMessage('info', '取消加入');
                });
            } else {
                this.checkJoin(this.roomGet.id);
            }
        },
        checkJoin: function (no, pwd) {
            let that = this;
            $.post({
                url: '/api/foo/join',
                data: {
                    no: no,
                    pwd: pwd,
                },
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                    if (data.success) {
                        that.showMessage('success', "验证成功，即将打开聊天室 - " + no);
                    } else {
                        that.showMessage('error', data.message);
                    }
                }
            })
        },

        showMessage: function (type, msg) {
            return (this.$message({
                type: type,
                message: msg
            }));
        },


        simpleClone: function (srcObj) {
            return (JSON.parse(JSON.stringify(srcObj)));
        }
        // clone: function (myObj) {
        //     if (typeof (myObj) != 'object' || myObj == null) return myObj;
        //     let newObj = {};
        //     for (let i in myObj) {
        //         newObj[i] = this.clone(myObj[i]);
        //     }
        //     return newObj;
        // }

    }
});

